<script setup lang="ts">
import { ref } from 'vue'
import { CaretDownOutlined, CheckCircleOutlined } from '@ant-design/icons-vue'
import { storeToRefs } from 'pinia'
import useHeaderStore from '@/store/header'
import EnginCard from './engin-card.vue'
import HEADER_SEARCH_ENGIN, { SearchEngin } from '@/config/header-search-engin'

const $store = useHeaderStore()
const { isShowDrawer } = storeToRefs($store)
const { handleOpenDrawer, handleCloseDrawer } = $store

const usedEngin = ref<SearchEngin>(HEADER_SEARCH_ENGIN[0])
const handleEnginChange = (engin: SearchEngin) => {
  usedEngin.value = engin
}

const getCurrentEngin = () => {
  return usedEngin.value
}

const switchEngin = () => {
  const currentId = usedEngin.value.id

  let currentIndex = HEADER_SEARCH_ENGIN.findIndex(
    item => item.id === currentId
  )

  if (currentIndex >= HEADER_SEARCH_ENGIN.length - 1) {
    currentIndex = 0
  } else {
    currentIndex += 1
  }
  usedEngin.value = HEADER_SEARCH_ENGIN[currentIndex]
}

defineExpose({
  switchEngin,
  getCurrentEngin
})
</script>

<template>
  <a-button
    class="relative flex items-center"
    type="text"
    @click="handleOpenDrawer"
  >
    <img :src="usedEngin.url" :alt="usedEngin.name" />
    <caret-down-outlined
      class="arrow-class"
      :class="isShowDrawer ? 'rotate-to' : ''"
    />
    <teleport to="#app">
      <transition name="fade">
        <div
          v-if="isShowDrawer"
          class="select-drawer-bg-class bg-opacity-30 fixed inset-0 bg-gray-600 cursor-default z-40"
          @click="handleCloseDrawer"
        >
          <teleport to="#header-input">
            <div
              class="select-drawer-class flex w-3/4 p-5 absolute z-50 rounded-xl"
            >
              <div
                class="relative"
                v-for="engin in HEADER_SEARCH_ENGIN"
                :key="engin.name"
              >
                <check-circle-outlined
                  v-if="usedEngin.id === engin.id"
                  class="selected-icon absolute z-50 rounded-full"
                />
                <EnginCard
                  :name="engin.name"
                  :active-url="engin.activeUrl"
                  :url="engin.url"
                  @change="handleEnginChange(engin)"
                />
              </div>
            </div>
          </teleport>
        </div>
      </transition>
    </teleport>
  </a-button>
</template>

<style lang="scss" scoped>
.ant-btn {
  padding: 4px 10px !important;
}
img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 6px;
}
.select-drawer-bg-class {
  backdrop-filter: saturate(180%) blur(1px);
  transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
}
.select-drawer-class {
  background-color: rgba($color: #c9d2db, $alpha: 0.7) !important;
  bottom: -7rem;
  .selected-icon {
    font-size: 1.3rem;
    --tw-bg-opacity: 1;
    background-color: rgba(96, 165, 250, var(--tw-bg-opacity));
    :deep(path) {
      color: #ffffff;
      &:last-of-type {
        display: none;
      }
    }
  }
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}
.fade-enter-active,
.fade-leave-active {
  transition: 0.3;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
}
.arrow-class {
  transform: rotate(0deg);
  transition: 0.3;
  -moz-transition: 0.3s;
  -webkit-transition: 0.3s;
}
.rotate-to {
  transform: rotate(180deg);
}
</style>
